Question

我有以下文字：

也许你下次会得到它。你可以这样做＆lt; #Name＆gt; ！它现在是＆lt;＃TimeOfDay＆gt;，你仍然需要得到＆lt;＃Target＆gt;。

我需要做的是从文本中获取所有＆＃34;标签＆＃34; （＆lt;＃ TagName ）并将标记替换为其他文本，例如：

<span class="nonEditable" style="cursor: pointer;">&lt;#TimeOfDay&gt; <span onclick="removePlaceholder(this)"/>
    <span class="closeTag">X</span>
</span>

Answer 1

如果我理解正确，你正在寻找这样的东西。它在相对div上使用绝对定位的元素。

const field = document.getElementById('field')

function addTag(target, tagText, xPos, yPos){
  const span = document.createElement('span')
  span.innerHTML = tagText
  span.style.position = 'absolute';
  span.style.top = yPos + 'px'
  span.style.left = xPos + 'px'
  target.appendChild(span)
}

addTag(field, 'Hello', 10, 50)
addTag(field, 'SomeTag', 200, 120)

#field{
  width: 300px;
  height: 300px;
  background; #fff;
  border: 5px solid #333;
  box-sizing: border-box;
  position: relative;
}

<div id="field"></div>

Answer 2

您可以使用regex（正则表达式）执行此操作。

1。）您需要create a regex符合搜索条件的标准

2.）然后执行regex.exec()中的while loop以完成所有matches，因为regex.exec()方法仅检索one match at a time并记住索引最后一场比赛。在下一次执行时，regex.exec()将从该索引（lastIndex）开始。

3。）使用str.replace()函数

替换所有匹配项

以下是您需要了解正则表达式的基础知识：

RegExp构造函数：

RegExp构造函数创建一个正则表达式对象，用于将文本与模式匹配。

参考：https://developer.mozilla.org/RegExp。

<强> regex.exec（）：

如果匹配成功，则exec（）方法返回一个数组并更新正则表达式对象的属性。返回的数组将匹配的文本作为第一个项目，然后为匹配的每个捕获括号中的一个项目包含捕获的文本。如果匹配失败，则exec（）方法返回null（强制为false）。

参考：https://developer.mozilla.org/RegExp/exec。

正则表达式标志：

＆＃39;＆＃39;＆＃39; flag与.exec（）方法一起使用以获得迭代进展。

＆＃39;我＆＃39; flag表示不区分大小写的搜索。

括号＆＃39;（）＆＃39;内部正则表达式：

正则表达式模式的任何部分周围的括号都会导致记住匹配的子字符串的那部分。记住之后，可以调用子字符串以供其他用途。

参考：https://developer.mozilla.org/Regular_Expressions。

以下是代码示例：

注意：创建了function removePlaceholder()作为示例，以显示onclick的{{1}}方法有效。

＆＃13;

newly created elements

＆＃13;

function removePlaceholder(thisX)
{
   console.log(thisX);                         // print the element
   console.log(thisX.innerHTML);               // print it's contents
   console.log(thisX.children[0].innerHTML);   // print contents of first child element
}


var string = "Maybe you'll get it next time. You can do it <#Name> ! It is now <#TimeOfDay>, and you still need to get <#Target>.";

// this regex will match only letters a-z and A-Z (the 'i' flag) and space characters
// you can add more like 0-9 (all numbers) or \w+ (any alphanumeric character), etc.
// the + sign means one or more characters that are listed inside the bracket []
var regex = new RegExp(/<#([a-z ]+)>/, 'gi');  // Note the parentheses ()

var result;
var changeTo;


while(result = regex.exec(string)) //regex.exec returns NULL when no matches are found
{
   // result[0] -> current match, result[1] -> remembered value from the parentheses
   changeTo = '<span class="nonEditable" style="cursor: pointer;">&lt;#' + result[1] + '&gt; <span onclick="removePlaceholder(this)"/><span class="closeTag">X</span></span>';
   
   string = string.replace(result[0], changeTo); //replace all occurences of the match
}

document.getElementById('test').innerHTML = string; //insert the created html into a div

// console.log(string);    //show the results of the modified string in the console

＆＃13;

/* CSS just to give the div some borders and padding */
#test
{
  border:1px solid #000;
  padding:20px;
}

＆＃13;

获取两个字符之间的所有单词并替换 - JavaScript

2 个答案: