使用编辑器的简码在网站上创建大型工具提示词汇表？ jQuery是正确的解决方案吗？

Question

正在一些基于wordpress的业余网站上工作。该爱好有一个很大（数百个）的术语，可能会在页面上多次出现，并带有用户可能希望调用的某些信息，因此，我实现了tooltipster的插件来在悬停时显示工具提示。

但是，由于最终要扩展站点的想法，以便其他非开发人员可以添加内容；我希望他们能够以一种用户友好的方式在书写时插入工具提示。

现在，工具提示仅出现在这样的段落中：

<p>This is my paragraph with a certain <span class="tooltip" data-tooltip-content="#Three_Word_Term">Three Word Term</span> in it. When it's hovered the tooltip displays. </p>

理想情况下，我会使用某种简单的简码，以便他们可以写一个带有{！Three Word Term}的句子。这就是他们最终要做的全部。

因此，我正在尝试一种方法，该方法将基本上抓取{！Text String}并将其替换为span和class信息，再加上一个与其匹配的ID匹配的ID，它获取ID =“ Text_String”。具体来说，我试图避免定义每个术语以及将要替换的术语，但是让它从{！*}（或类似的含义）之间自动获取该术语，并在替换位中重用它。

我思考这可以用jQuery完成吗？我知道我可以找到并替换，只是不知道是否可以在某些标记之间“查找”文本，然后在替换中重复使用。

还不知道jQuery是否是最好/最干净的解决方案？我绝对是一个初学者，并且会随手自学，因此非常感激和投入。

Answer 1

如果我了解您的要求，您希望用户输入文本，例如：

<p id="myP">This is my paragraph with a certain {!Three Word Term} in it. When it's hovered the tooltip displays.</p>

然后保存时，将文本替换为

<p id="myP">This is my paragraph with a certain <span class="tooltip" data-tooltip-content="#Three_Word_Term">Three Word Term</span> in it. When it's hovered the tooltip displays. </p>

我添加了id并假设您有某种方式可以获取此特定段落元素（我将仅使用id）。您可以使用var enteredText = $("#myP").html();

在jQuery中获取段落的输入文本

如果您尝试匹配输入的模式并替换它们，则可能需要了解一些有关JavaScript“正则表达式”的知识。它们很困难（特别是对于JavaScript新手而言），但对于诸如此类的事情非常有用。这是一个正则表达式，您可以用来查找给定文本中所有具有大写字母，小写字母或用{！包围的空格的术语。和}

var myRegex = /\{!([A-Z\s]+)\}/gi;

是的，这很麻烦，但是弄清楚这个正则表达式可能是最困难的部分。现在，您可以使用.match仅查看输入的文本中是否存在这种模式的内容：

var foundText = "";

if( enteredText.match( myRegex ) != null)
  foundText = enteredText.match( myRegex )[0];

如果上面匹配了模式，现在您可以使用一些字符串方法来处理找到的术语。

var textToReplaceEnteredText = "";

// ... do some stuff with the foundText and enteredText strings above
// ... use those to build the textToReplaceEnteredText string
// ... I'll let you work this out. You may want to use the .replace method of strings

// Finally, use jQuery's .html method again, to replace the paragraph's HTML text
$("#myP").html( textToReplaceEnteredText );