如何在 contenteditable div 中抓取某些单词答案

【问题标题】：How to grab certain word inside contenteditable div如何在 contenteditable div 中抓取某些单词
【发布时间】：2021-02-01 08:53:20
【问题描述】：

编辑：textarea -> contenteditable div

我正在尝试制作一个脚本工具，它可以从 contenteditable div 中抓取某个单词，然后将其更改为另一个单词。

为了更清楚地向您展示我的目标，该工具应该“看起来像”下面的 sn-p（尽管脚本尚未准备好）：通过单击按钮，this is a sample text, this is another text 应替换为 @987654322 @。两个thiss 全部切换到thats。

<div contenteditable="true">this is a sample text, this is another text</div><br>
<button>change 'this' to 'that'</button>

所以我遇到了第一个问题；什么是在内容可编辑的 div 中抓取整个文本中的所有“特定单词”的方法？ Jquery 解决方案也可能会有所帮助。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

我在这里为您的按钮和文本区域添加了一个 ID。

要实现这一点，您可以在按钮元素中添加一个事件监听器并让它监听点击事件。

当按钮被按下时，使用 textContent 属性获取 div 的文本，并使用 textContent 属性重新评估它，但将所有出现的 old word 替换为 new word使用 replaceAll() 方法。

document.getElementById('btn').addEventListener('click', replacer);

function replacer(){
let tx = document.getElementById('txarea');
tx.textContent = tx.textContent.replaceAll('this', 'that');
}

<div id="txarea">this is a sample text, this is another text</div><br>
<button id="btn">change 'this' to 'that'</button>

【讨论】：

谢谢。我稍微编辑了这个问题：我真正想要的是 contenteditable div 而不是 textarea，很抱歉造成混淆。它会类似地工作吗？
请使用value 而不是textContent 作为输入和文本区域元素。您单击按钮 -> 在文本区域中添加另一个“this” -> 再次单击按钮 -> 不会将 this 更改为 that
对于 div 它的工作原理相同，我已将 textarea 更新为 div。
@adiga true 提供建议
@MaiPhuong OP 的代码最初有 textarea。 div 显然没有价值

【解决方案2】：

使用当前的 JS，大部分时间都不需要 jquery。这个标准的 JS sn-p 应该可以解决问题：

const editableText = document.getElementById('editable-text')
function changeWord() {
  const value = editableText.textContent
  editableText.textContent = value.replaceAll('this', 'that')
}

<div contenteditable="true" id="editable-text">this is a sample text, this is another text</div><br>
<button onclick="changeWord()">change 'this' to 'that'</button>

【讨论】：

EDIT: textarea -> contenteditable div --> 所以使用textContent 而不是value
@MaiPhuong 现在改了。

【解决方案3】：

const x = document.getElementById('changetext');
function changeText() {
  const changeValue = x.textContent;
  x.textContent = changeValue.replaceAll('this','that');
};

<div contenteditable="true">
<textarea id="changetext" style="width:100%;">this is a sample text, this is another text</textarea><br>
<input type="button" onclick="changeText()" value="change 'this' to 'that'"></input>
</div>

【讨论】：

【解决方案4】：

jQuery 版本看起来更优雅简洁。

$("#btn").on("click", () => {
  const $txarea = $("#txarea");
  var text = $txarea.text();
  $txarea.text(text.replaceAll('this', 'that'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="txarea">this is a sample text, this is another text</div><br>
<button id="btn">change 'this' to 'that'</button>

【讨论】：