Question

我有一个像这样的javascript变量：

var text = "A <mark id='1'>businessman</mark> should be able to <mark id='1'>manage</mark> his business matters";

我想将每个单词包含在具有不同id的span元素中，但保留已包含在<mark>标记中的单词。像这样：

text = "<span id='1'>A </span><mark id='1'>businessman</mark><span id='2'>should</span><span id='3'>be </span><span id='4'>able </span><span id='5'>to </span><mark id='2'>manage</mark><span id='6'>his </span><span id='7'>business </span><span id='8'>matters</span>";

我想在javascript或jquery中完成所有这些但是无法得到它。如果你的人能帮助我，那就太好了。

谢谢。

Answer 1

以下快速和脏方法从<mark id='1'>元素中删除空格，以便整个字符串可以在空格上分割，允许根据需要包装单个单词，然后将它们连接在一起，最后<mark>个元素已恢复并重新编号：

var text = "A <mark id='1'>businessman</mark> should be able to <mark id='1'>manage</mark> his business matters";
var spanIndex = 1;
var markIndex = 1;
var result = text.replace(/<mark id='1'>/g,'<mark>')
  .split(' ')
  .map(function(v){
    return v.slice(0,6)==='<mark>' ? v : "<span id='" + spanIndex++ + "'>" + v + '</span>'
  })
  .join(' ')
  .replace(/<mark>/g, function() { return "<mark id='" + markIndex++ + "'>"});
console.log(result);

注意：您说您要“保留已包含在<mark>标签中的单词”，但随后您的示例输出重新编号为标记元素ID（输入同时为id='1'，但输出有1和2）。所以我已经显示了重新编号的代码，但显然如果你不打算这样做，你可以让最后的.replace()变得更简单。

Answer 2

试试这个，

＆＃13;

function removeEmptyStrings(k) {
  return k !== '';
}

function getWordsArray(div) {
  var rWordBoundary = /[\s\n\t]+/; // split by tab, newline, spaces
  var output = [];
  for (var i = 0; i < div.childNodes.length; ++i) { // Iterate through all nodes
    var node = div.childNodes[i];
    if (node.nodeType === Node.TEXT_NODE) { // The child is a text node
      var words = node.nodeValue.split(rWordBoundary).filter(removeEmptyStrings); // check for emptyness
      for (var j = 0, l = words.length; j < l; j++) {
        // adding class txtSpan so that it will not affect your spans already available in your input.
        output.push('<span class="txtSpan">' + words[j] + '</span>');
      }
    } else { // add directly if not a text node
      output.push(node.outerHTML);
    }
  }
  return output;
}
var counter = 1,
  html = getWordsArray($('#editor')[0]).join('');
$('#output').html(html).find('span.txtSpan').each(function() {
  this.id = 'span-' + counter++;
});

＆＃13;

span.txtSpan {
  padding: 2px;
  display: inline-block;
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="editor">
  A <mark id='1'>businessman</mark> should be able to <mark id='1'>manage</mark> his business matters
</div>
<div id="output">

</div>

＆＃13;

Answer 3

我采用了一种更简单的方法，使用浏览器的原生DOM 来解析和转换。

这里的想法是：

创建一个空元素，不要将其添加到文档中。
获取要转换的文本并将其换行并将其设置为temp元素的$db = new mysqli('localhost', 'user', 'pass', 'demo'); 'demo' => 'Name of your Database'。
从temp元素的innerHTML创建一个数组（在设置childNodes时创建）
如果childNode有innerHTML，则它是一个未包含在nodeValue标记中的文本节点。在这种情况下，请创建一个新的span元素
如果节点已经包含在元素中，则只返回元素
执行所有操作时，将ID重新映射到数组中的索引。这样他们就是独一无二的。

由于您正在设置元素的innerHTML，因此DOM实际上会修复任何错误，并且您可以获得完美的HTML：）

＆＃13;

mark

＆＃13;

如何在文本编辑器中包装（跨度）单词

3 个答案: