Question

我正在尝试检测文本中的字符，如果发现它在HTML元素中包含该字符，则删除该字符。

示例：

Case:

变为

<span class="th">Case</span>

方式

我可以使用

检测:的存在

if (str.indexOf(':') > -1)

在我使用之前得到这个词：

var th = str.split(':')[0];

将单词包装在我尝试过的元素中：

var th_wrap = "<span class='th'></span>";  
$(th).wrap(th_wrap);

哪个不起作用。要删除我尝试的:：

th.replace(':', '');

这也行不通。

为了使它稍微复杂一些，我想抓住someword:的任何一个，而不仅仅是第一个。var str = $('.target').html(); if (str.indexOf(':') > -1) { var th = str.split(':')[0]; th.replace(':', ''); var th_wrap = "<span class='th'></span>"; $(th).wrap(th_wrap); }。

我很感激任何指示，欢呼。（javascript或jQuery）

段

th { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="target">
  Case 1:
  <br />some text
  <br />some more text
  <br />even more text
  <br />
  <br />Case 2:
  <br />some text
  <br />some more text
  <br />even more text
</p>

{{1}}

Answer 1

在您的情况下， 案例1： 和 案例2： 是文字节点。

因此，您需要获取 target 下的所有节点：为此，请使用jQuery.contents()。

摘录：

＆＃13;

$('.target').contents().each(function(idx, ele) {
  if (ele.nodeType == Node.TEXT_NODE &&
            ele.textContent.indexOf(':') > -1) {
    ele.textContent = ele.textContent.replace(':', '');
    $(ele).wrap($('<span/>', {
      class: 'th'
    }));

  }
});

＆＃13;

.th {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p class="target">
    Case 1:
    <br />some text
    <br />some more text
    <br />even more text
    <br />
    <br />Case 2:
    <br />some text
    <br />some more text
    <br />even more text
</p>

＆＃13;

Answer 2

您可以使用正则表达式来完成这项工作。使用jquery .html(function)更改p的html。在回调函数中使用String.prototype.replace()来包含span中的目标字符串。

＆＃13;

$("p").html(function(i, html){
  return html.replace(/(\w+\s\d+):/g, "<span class='th'>$1</span>");
});

＆＃13;

.th { color: red }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="target">
  Case 1:
  <br />some text
  <br />some more text
  <br />even more text
  <br />
  <br />Case 2:
  <br />some text
  <br />some more text
  <br />even more text
</p>

＆＃13;

如何在“：”之前检测单词并使用jquery包装在“span”中？

2 个答案: