Question

我有一小段文字，其中可能有多个相同的单词。每当出现此字词时，我都希望将其替换为它本身，而是将其包裹在div中，以便我可以应用样式并添加一些其他文本。

我已经在单词的第一个实例中使用了此功能：

var definition = glossaryList[index].definition;
var termStart = textAsLower.search(termAsLower);
var termEnd = term.length + termStart;
var replacedText = addDefinitionToText(textContent, term, definition, termStart, termEnd);

function addDefinitionToText(textContent, term, definition, termStart, termEnd) {
    var textStart = textContent.substring(0, termStart);
    var termInText = textContent.substring(termStart, termEnd);
    var textEnd = textContent.substring(termEnd);

    var replacedTerm = '<span class="has-definition">' + termInText;
    replacedTerm += '<div class="attached-definition">';
    replacedTerm += '<div class="defintion-title">' + term + '</div>';
    replacedTerm += '<div class="definition-text">' + definition + '</div>';
    replacedTerm += '</div>';
    replacedTerm += '</span>';

    return textStart + replacedTerm + textEnd;
}

我尝试将此函数放入while循环并递增计数，但这会导致我出现问题，冻结或不返回期望的结果：

while(something.toLowerCase().search(termAsLower)) {
    var something = textAsLower.substring(termEnd);
    termStart = something.search(termAsLower);
    termEnd = term.length + termStart;
    replacedText = addDefinitionToText(something, term, definition, termStart, termEnd);
    something = replacedText.substring(termEnd);
}

有人对此有解决方案吗？理想情况下，我实际上希望使用一种与.search（）不同的方法，该方法不仅可以查找所有实例，而且可以查找所有实例，

谢谢！

Answer 1

我以前做过这样的事情。我用空格分割文本，然后将该数组放入foreach中并进行编辑。这是一个示例代码

if(text.includes("http")){

   var returnString = '';

   text.split(" ").forEach(function(link) {

   if(link.includes("http")){
     returnString += '<a target="_blank" style="color:white" href="' + link + '">here</a> ';
   }else{
     returnString += link + " ";
   }

});

text = returnString;

Answer 2

您只需使用正则表达式即可实现所需的功能：

var searchWord = "tag";
var textStr = "HTML tag is used for scripting. Tag can also be self-closing.";

// case-insensitive regex
var re = new RegExp(searchWord, "gi");
textStr = textStr.replace(re, '<' + searchWord + '>');

// case-sensitive search
var re = new RegExp(searchWord, "g");
textStr = textStr.replace(re, '<' + searchWord + '>');

Answer 3

带有String replace方法的正则表达式可以很容易地解决这个问题。

此函数将返回一个新字符串，其中包含单词和定义。

我使用模板文字使事情更简洁，但IE中不支持它们。

function wrapWordWithDefinition(sentance, word, definition) {
    var template = `<div>
             <div class="attached-definition">
             <div class="defintion-title">${word}</div>
             <div class="definition-text">${definition}</div>
         </div>
    </div>`;
    // global and case insensitive
    var re = new RegExp(word, 'gi'); 

    return sentance.replace(re, template);
}

var sentance = "This will replace word, when word is encountered";
var myword = "word";
var definition = "The definition of the word";
var result = wrapWordWithDefinition(sentance, myword, definition);
console.log(result)

要进一步阅读正则表达式：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

在文本中循环查找同一字符串的多个实例

3 个答案: