Question

我知道有些主题涵盖了几乎相同的主题，但我找不到能够帮助我实现所需目标的主题。

所以我有一些带有单词，标点符号和HTML的文字，比如说

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper elit efficitur tempus sagittis. Vivamus at eros — quis velit ornare consequat. Vestibulum suscipit erat enim; sed bibendum augue interdum at.</p>
<p>Sed vulputate ipsum id ullamcorper vehicula. Ut ac ornare risus, id vehicula justo. Quisque pretium, lectus "et rutrum fermentum", leo mauris interdum eros, nec blandit nibh dolor nec enim.</p>

我想要做的是用<span>元素包含每个单词和标点符号，同时忽略并保持HTML标记的完整性。我需要包含每个标点符号，即使它们紧挨着彼此或一个单词。

所以输出就像

<p><span>Lorem</span> <span>ipsum</span> <span>sit</span> <span>sit</span> <span>amet</span><span>,</span> (etc...)

到目前为止，我已经设法按空格分割并用<span>包含结果，但HTML标记和标点符号令人头疼。：P

提前致谢！

修改

以下是我目前使用的代码（正如您所见，要分割的文字位于div元素id=textarea中：

$('#textarea').each(function(){
    var text = $(this).html().split(" "),
        len = text.length,
        result = []; 

    for( var i = 0; i < len; i++ ) {
        result[i] = '<span class="clickable">' + text[i] + '</span>';
    }
    $(this).html(result.join(' '));
});

Answer 1

您使用的是jQuery吗？如果是这样，您可以使用.text()轻松地完成标记和语法。

http://jsfiddle.net/r6dz97ud/

$("p").each(function(i, p) {
    var words = $(p).text()
    $(p).html("")
    $(words.split(" ")).each(function(j, word) {
        var span = $("<span></span>")
        span.html(word)
        $(p).append(span).append("&nbsp;")
    });
});

Answer 2

以下是对任何html字符串值执行此操作的一般解决方案：

var tagsexpr = "(\\<\\w+\\>)|(\\<\\/\\w+\\>)";
var wordexpr = "[^\\<?\\/|>| ]\\w+";
var puncexpr = "[\\.,\\?\\!]";

function wrap(text) {
  var tags = text.match(new RegExp(tagsexpr, 'g'));
  var words = text.match(new RegExp(wordexpr + '|' + puncexpr, 'g'));

  return tags[0] + words.reduce(function (base, curr, indx) {
    return (new RegExp(puncexpr, 'g')).test(words[indx + 1]) ? 
      base + '<span>' + words[indx] + '</span>' : base + '<span>' + words[indx] + '</span> ';
  }, '').trim() + tags[1];
}

console.log(wrap('<p>hello from the matrix.</p>'));
// => "<p><span>hello</span> <span>from</span> <span>the</span> <span>matrix</span><span>.</span></p>"

使用JavaScript拆分包含单词，带有span的标点符号但忽略HTML

2 个答案: