Question

假设我有一个文本：

<div id="xxxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

我想创建一个最少需要 2 个参数的函数。

const inputDiv = document.getElementById("xxxx");
const string1 = "copying forbidden"
addTextBetweenWords(inputDiv, string1)

假设字符串“禁止复制”。

如果有人复制了 div inputDiv 中包含的全文或部分文本，结果将是相同的文本。例如，复制的最终文本将是：

Lorem copying forbidden ipsum copying forbidden dolor copying forbidden sit copying forbidden amet copying forbidden, consectetur copying forbidden adipiscing copying forbidden elit copying forbidden, sed copying forbidden do copying forbidden eiusmod copying forbidden tempor copying forbidden incididunt copying forbidden ut copying forbidden labore copying forbidden et copying forbidden dolore copying forbidden magna copying forbidden aliqua.

任何人都可以建议如何在 vanilla js 中创建这样的函数，它可以与 ctrl-c 一起使用，也可以使用鼠标右键单击。

我不是在问一个现成的解决方案，它可以帮助理解如何编写它。但是如果有人想提出解决方案并解释它，我也会很高兴。我只是想了解它。我在想是不是一定要拆分、编辑、重新加入，还是有简单的方法。

Answer 1

很难阻止人们从浏览器复制文本，但您可以使用 .replace 函数来做到这一点：

const inputDiv = document.getElementById("xxxx");
const string1 = "copying forbidden"
addTextBetweenWords(inputDiv, string1)

function addTextBetweenWords(words, text){
  words.innerHTML = words.innerHTML.replaceAll(" ", `${ text }`)
}

Answer 2

您可以使用 RegExp 在全局范围内replace：

function addTextBetweenWords(element, text){
  content = element.innerHTML
  regex = new RegExp(' ', 'g');
  content = content.replace(regex, " "+text+" ")
  element.innerHTML = content
}

Answer 3

这将完成工作：

const inputElement = document.getElementById("xxxx");
const copyrightString = "do not copy";

const replaceWhitespacesWithString = function (){
    const newText = inputElement.innerText
    .split(/\s+/) // splits by whitespaces
    .join(" "+copyrightString+" "); // re-assembles it with the content of 'copyrightString' as a glue.
    
  document.getElementById("newText").innerHTML = newText;
}

现场演示：https://jsfiddle.net/ezs1r8op/7/

Answer 4

function copiedEvent() {
  let text = document.getElementById("demo").innerHTML; 
  const words = text.split(' ');
  document.getElementById("res").innerHTML = words.map(word =>  word + " copyright prohibited ").join('');
    
}

<div id="demo" oncopy="copiedEvent()">Try to copy this text</div>
 <div id="res"></div>

JS - 在每个单词后添加字符串

4 个答案: