从列表中查找单词并将每个单词包装在一个跨度中？答案

【问题标题】：Find words from a list and wrap each in a span?从列表中查找单词并将每个单词包装在一个跨度中？
【发布时间】：2017-07-15 20:31:54
【问题描述】：

我想动态检查段落中的单词列表，然后将这些单词包装在 span 标签中。

例子：

<p class="para">
My house is red and my front door is blue.
</p>

我如何检查单词“house”、“red”、“door”和“blue”，以及我可能添加到段落中的任何其他单词，然后将它们包装在一个简单的 span 标签中，我然后可以用css样式吗？

我已经搜索并找到了单个单词的答案，但作为一个完全新手，我不知道如何检查我可以添加到它们的列表。

【问题讨论】：

您是否至少尝试过修改您发现的答案之一以满足您的需求？你自己有什么尝试吗？

标签： javascript jquery html css

【解决方案1】：

Javascript 有很棒的正则表达式——你可以使用它们。

    var words = ['house', 'red', 'door', 'blue'];
    // create a regular expression matching any of these words, using 'g' flag to match all instances
    var regexp = new RegExp('(' + words.join('|') + ')', 'ig');

    $('p.para').each(function(num, elem) {
        var text = $(elem).text();
        // use string.replace with $& notation to indicate whatever was matched
        text = text.replace(regexp, '<span class="$&">$&</span>');
        $(elem).html(text);
    });

这会将您的所有单词放在名称匹配的范围内，例如 <span class="house">house</span>。只需将第一个 '$&' 替换为某个预定义的类，您就可以为每个类设置相同的类。

【讨论】：

注意，这将从受影响的段落中删除任何以前的 html 格式。
谢谢。这就是我一直在寻找的。有没有办法不分大小写检查单词？
@Jerpl i RegExp 中的标志表示不区分大小写。
顺便说一句更好escape words for Regexp here.
为什么这里需要每个？

【解决方案2】：

我提供了一个不错的纯 javascript 演示，没有 jQuery。

https://jsfiddle.net/66hujh1e/

(function() {
  var paragraph = document.getElementsByClassName('para')[0];
  var text = paragraph.innerHTML;

  var wordArr = text.split(' ');
  text = [];
  wordArr.forEach(function(el) {
  	if(el === 'house' || el === 'red')
    	el = '<span class="matched">' + el + '</span>';
    text.push(el);
  });
  console.log(text);
  text = text.join(' ');
  paragraph.innerHTML = text;
})()

.matched {
  background-color: red;
  font-weight: bold;
}

<p class="para">
My house is red and my front door is blue.
</p>

基本上，您只想获取文本，对其进行拆分和处理，然后将其重新组合在一起，并将其分配回该节点文本。使用正则表达式等有更优雅的方法可以做到这一点，但基于低层次的理解，我认为这能更好地说明逻辑。

【讨论】：

【解决方案3】：

可能的解决方案。

const words = ['house', 'red', 'door', 'blue'];
let elem = document.querySelector('.para');

elem.innerHTML = elem.textContent.split(' ').map(v => {
  return words.indexOf(v) > -1 ? `<span class='r'>${v}</span>` : v;
}).join(' ');

.r {
  color: blue;
}

<p class="para">
  My house is red and my front door is blue.
</p>

【讨论】：

【解决方案4】：

function wrapWithSpan(str){
    var outerDom = $('p.para');
    outerDom.html(outerDom.html().replace(RegExp(str,'ig'), '<span>' + str + '</span>'))
}

或者如果你有一个数组，你可以试试这个

function wrapWithSpan(strArr){
    var outerDom = $('p.para');
    outerDom.html(outerDom.html().replace(RegExp(strArr.join('|'),'g'), 
    function(token){
        return '<span>' + token + '</span>';
    });
}

【讨论】：