仅在完整单词后插入 HTML答案

【问题标题】：Insert HTML only after a full word仅在完整单词后插入 HTML
【发布时间】：2015-01-12 21:55:37
【问题描述】：

我正在使用 jquery 在锚点之后插入内容。例如，如果我有以下内容：

<p>this is an example sentence with a link coming up (Here's the <a href='#' class='insertpoint'>link content</a>). More text may or may not follow here.</p>

使用以下内容：

$("a.insertpoint").click(function() {  
   var mapDiv = $("<div class='map' id='testmap'><img src='graphics/loading.gif'></div>");
   mapDiv.insertAfter($(this));
});

问题是一些链接后面有括号/大括号，这会为新的 div 造成难看的拆分。有没有什么好的方法可以查看链接后面是否有空格或段落结尾，如果没有，移动多少个字符直到到达空格？

【问题讨论】：

您应该发布更多代码，因为很难说出您在做什么，例如，您如何获得$(this)，它来自哪里？
抱歉，我通常使用 $(this) 作为对单击的锚点的引用，并认为这很明显并且可以保持问题简洁。我现在可以看到混乱了，我已经编辑了要包含的问题。

标签： javascript jquery html css

【解决方案1】：

试试这个：

$(this).parent().appendChild(mapDiv);

假设您希望新元素出现在包含链接的元素的末尾，这就是您的示例所示，这应该可以工作

更新：

<p>this is an example sentence with a link coming up (Here's the <span><a href='#' class='insertpoint'>link content</a>)</span>. More text may or may not follow here.</p>

要使我之前的解决方案有效，您可以简单地将链接包装在一个跨度中，以便锚的父级末尾是您要插入新元素的位置

或者，如果你想处理查看 html，这里是一个解决方案的开始，它将找到在锚标记之前的字符，但是这个解决方案要求你所有的锚都有一个唯一的 id 并且 id是最后一个属性，即它应该出现在结束标记之前：

HTML：

<p>this is an example sentence with a link coming up (Here's the <a href='#' class='insertpoint' id="1">link content</a>). More text may or may not follow here.</p>

Javascript：

$("a.insertpoint").click(function() {  
    var mapDiv = $("<div class='map' id='testmap'><img src='http://lorempixel.com/400/200/'></div>");
    var parent = $(this).parent();
    var indexOfAnchorId = $(parent).html().indexOf($(this).attr("id"));
    var indexOfAnchorEnd = indexOfAnchorId + $(this).html().length + 7;
    alert($(parent).html()[indexOfAnchorEnd]);
   //mapDiv.insertAfter($(this));
});

小提琴：http://jsfiddle.net/y09cvu6q/

【讨论】：

谢谢乔。如果能保证锚点出现在段落的最后一句中，那就太好了，但事实并非如此。我已经编辑了示例文本，所以这个假设很清楚。我认为解决方案仍然需要确定锚点后面的间距。
它的自动化程度比我想的要低，但你给了我一个想法，就是在链接的父级之后插入内容，就像你提到的那样跨度。第二个想法很好，但每次都没有得到完美的位置。我认为，由于美学原因，我的一些插入位置有点主观，所以我现在可能会屈服于手动放置跨度的想法。谢谢乔。
要正确放置第二个位置，您必须确保锚点像 id="1"> 一样关闭，而不是 id="1" > 或类似的东西，@987654328 之后的任何额外字符@ 会弄乱索引。您还可以尝试在id 的位置之后找到第一个> 的位置，这将告诉您每次锚点内容的开始位置。我的例子有点粗略，因为它只是将 7 添加到 id 的索引中，这将解释所有这些字符：> 出现在 id 之后并且不包含在锚点内容中

【解决方案2】：

您可以尝试使用.split()

var str = "...a link coming up (here's the link content)."
var words = str.split(" ");
var lastWord = words[words.length - 1];

这应该让你在正确的领域开始做任何你想做的事情。

您可能可以执行以下操作：

var link = '<a href="somewhere.com">' + lastWord + '</a>';
var newStr = str.replace(lastWord, link);

这是未经测试的，但它是解决方案的开始

【讨论】：