代码之家 › 专栏 › 技术社区 › jock.perkins

同一字符串的多个实例的循环文本

arrays html jquery javascript

jock.perkins · 技术社区 · 6 年前

我有一段文字,里面可能有同一个单词的倍数。每当这个词出现时,我都希望用它本身替换它,但要用一个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()不同的方法,它不仅查找第一个实例,而且查找结果也不太丰富。

谢谢!

3 回复 | 直到 6 年前

Srishti Gupta 6 年前

您可以简单地使用regex来实现您想要的:

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 + '>');

konuralpt 6 年前

我以前做过类似的事情。我将文本按空格拆分,然后将该数组放入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;

barbsan Cibi 6 年前

使用字符串替换方法的正则表达式可以很容易地解决这个问题。

此函数将返回一个换行了单词和定义的新字符串。

我使用了一个模板文字来让事情变得更干净一些,但在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