javascript - 突出显示由 foreach 循环生成的段落内的确切文本

Question

我正在使用 PHP 从 API 导入一些数据作为 JSON 然后将其解码为 array 然后使用 foreach() 循环打印出来

示例

// comes for api or database or whatever in json format
$decoded = json_decode($content, true);
foreach($decoded as $paragrah){
echo $paragrah . '<br />;
}

演示结果

hello world from reddish hair Mars
hello world from my beautiful gas of Saturn
hello world from cold one Neptune
hello world from my big one Jupiter

现在使用 JAVASCRIPT 或 jQuery 如何在每个段落中突出显示确切的文本“from my”，如果发现像这个图像

我的尝试(失败)

<style>
.highlight {
    background-color: #fff34d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
</style>

    <script type="text/javascript">
    function highlight(text) {
      var inputText = document.getElementById("inputText");
      var innerHTML = inputText.innerHTML;
      var index = innerHTML.indexOf(text);
      if (index >= 0) {
       innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
       inputText.innerHTML = innerHTML;
      }
    }
    </script>

    <div id="inputText">
        <?php
        // comes for api or database or whatever in json format
        $decoded = json_decode($content, true);
        foreach($decoded as $paragrah){
        echo $paragrah . '<br />;
        }
        ?>
    </div>
    <script type="text/javascript">highlight('from my');</script>

问题

它只在一个段落中突出显示文本“from my”，如图所示!

Answer 1

与其像现在一样在文本中查找子字符串并尝试查找文本的位置，不如使用 regEx 将 replace 替换为 backreference

var div=document.getElementById('data');
  div.innerHTML=div.innerHTML.replace(/(from my)/gi, "<span class='highlight'>$1</span>" );
  
/* utility function to highlight `_phrase` in _str */
function replacer( _str, _phrase, _class ){
  return _str.replace( new RegExp( _phrase, 'gi' ), "<span class='"+_class+"'>$&</span>" );
}

div.innerHTML=replacer( div.innerHTML, 'world', 'lime' );
div.innerHTML=replacer( div.innerHTML, 'neptune', 'fuchsia' );

body{font-family:monospace;line-height:1.4rem}
div span{padding:0.1rem;border:1px solid rgba(0,0,0,0.1);border-radius:0.1rem}

.highlight{background:yellow;}
.fuchsia{background:fuchsia;color:yellow;}
.lime{background:lime;color:black;}

<div id='data'>
  hello world from reddish hair Mars<br />
  hello world from my beautiful gas of Saturn<br />
  hello world from cold one Neptune<br />
  hello world from my big one Jupiter<br />
</div>

在研究了接受的答案之后，我想我会展示另一种解决方案，它迄今为止更灵活，并且实际上使用输入参数进行搜索/替换，而不仅仅是在不必要的测试中

function replacer( _str, _phrase, _class ){
    return _str.replace( new RegExp( _phrase, 'gi' ), "<span class='"+_class+"'>$&</span>" );
}