如何使用 GWT 或 Javascript 强调 (innerText) a DIV 中的文本：

Question

如何使用 GWT 或 Javascript 强调 DIV 中的文本：

Element content = DOM.createElement("div");
content.setInnerText(contentString);

生成这个 DIV:

<div>test message test message</div>

我希望能够用这段代码强调一些文本（例如“test”）：

<em>test</em>

所以div会是这样的：

<div>
  <em>test</em> message <em>test</em> message
</div>

Answer 1

您不能仅更改一部分文本的格式，但您可以更改 DIV 的 innerHTML 以包含格式，如下面的脚本部分所示。

<html>
 <body>
  <div id="mydiv">test message</div>
 </body>

 <script language="JavaScript">
  var mydiv = document.getElementById("mydiv");
  mydiv.innerHTML = mydiv.innerHTML.replace(new RegExp('test', 'g'), "<em>test</em>");
 </script>

</html>

Answer 2

GWT:

content.setInnerHTML(contentString.replaceAll("test", "<em>test</em>"))

Answer 3

您可以通过 2 个步骤轻松实现您想要的。

首先，不要使用 setInnerText，因为它不会解释 HTML。相反，您应该使用元素的 .innerHTML 属性。

其次，您可以用正则表达式替换所需的单词。只需将您的单词包裹在单词 delemiter (\b) 之间。

最终代码如下所示：

content.innerHTML = contentString.replace(/\btest\b/g, '<em>test</em>');

如果您有多个单词要更改：

content.innerHTML = contentString.replace(/\b(test|other words)\b/g, '<em></em>');

如何使用 GWT 或 Javascript 强调 (innerText) a DIV 中的文本：

How to emphasize text inside (innerText) a DIV with GWT or Javascript:

html

javascript

java

jquery

gwt