已经4天了,我尝试了很多不同的方法,现在我几乎放弃了,似乎无法做到……
我正在尝试创建一个脚本,它会生成一个html文本,并在计算x个单词后将其放在博客文章中,让我们说它在计算10个单词之后.我能够通过使用正则表达式(拆分)来实现这一点,但正则表达式正在剥离我的帖子的HTML.从理论上讲,它非常简单,但我不知道为什么它在实践中如此复杂.我不能使用段落或任何元素作为引用,它必须仅在文本之后插入html,而不是在代码标记内,例如,我有< script>一些代码< / script>我的博客文本—需要插入的文本 – 它不能计算脚本标签内的内容,它应该只计算纯文本并在其后插入新的html并进行渲染.让我们说它与使用WYSIWG编辑器输入文本和插入图像的逻辑相同.
这很难解释.
基本上我需要的东西只是得到一个横幅并插入文本中的x个单词之后,就是这样.
这是我上次尝试过的,没有任何成功(代码不能正常工作)：
更新 – 这是我开始在stackoverflow中打开关于这个主题的主题,我将提供链接供参考：
> jquery code not working in site
> jquery calling null element that actually exists
> Jquery use “count” instead of “slice”
> Jquery script operator == not working in website,but works in local
> Is it possible to skip html tags using jquery and split method?
> jquery – Use split to split only text?
> How can I use split but skip html/javascript/php and other inner tags?
> Jquery – Break/Prevent each loop
最佳答案
对此的一种解决方法如下,尽管可悲的是,有点幼稚,我不禁怀疑,过于复杂.然而：
// a simple utility function to get only the actual words
// from the supplied textNode (though this should work for
// elements also):
function getActualWords(node) {
// gets the textContent of the node,// splits that string on one-or-more ('+')
// white-space characters ('\s');
// filters the array returned by split():
return node.textContent.split(/\s+/).filter(function (word) {
// word is the current array-element
// (a 'word') in the array over
// which we're iterating using
// Array.prototype.filter();
// here if the word,with leading
// and trailing white-space removed
// (using String.prototype.trim())
// has a length greater than 0
// (a falsey value) the word is kept
// in the array returned by filter:
return word.trim().length;
// note that negative numbers are
// also truthy,but no string can
// have a negative length; so the
// comparison is effectively,if
// not explicitly 'greater than zero'
// rather than simply 'not-zero'
});
}
// named function to insert the specified
// element after the nth word:
function insertElemAfterNthWord(opts) {
// defining the defaults for the function
// (which can be overridden via the opts
// Object):
var defaults = {
// the word after-which to insert the
// the new element:
'nth': 5,// the text of the new element:
'elemText': 'new element',// the type of element (note no '<' or '>'):
'elemTag': 'div'
};
// iterating over the supplied opts Object to update
// the defaults with the user-supplied options using
// for...in loop:
for (var prop in opts) {
// if the opts Object has a property and
// that property is not inherited from the
// prototype chain:
if (opts.hasOwnProperty(prop)) {
// we set the defaults property
// to the property-value held
// in the opts Object:
defaults[prop] = opts[prop];
}
}
// aliasing the defaults object (simply to save
// typing; this is not essential):
var d = defaults,// ensuring that the supplied string,// specifying the element-type has no
// '<' or '>' characters (to ensure validty
// this should be extended further to
// ensure only alphabetical characters are kept):
tag = d.elemTag.replace(/<|>/g,''),// creating the new element:
elem = document.createElement(tag);
// setting the textContent of the new element:
elem.textContent = d.elemText;
// ensuring that the d.nth variable is
// a number,not a string,in base-10:
d.nth = parseInt(d.nth,10);
// if a node was specified:
if (d.node) {
// setting the 'n' variable to hold
// to the firstChild of the d.node:
var n = d.node.firstChild,// using the utility function (above)
// to get an Array of only the actual
// words held in the node:
words = getActualWords(n),// getting the number of words held
// in the Array of words:
wordCount = words.length;
// while (n.nodeType is not a textNode OR
// d.nth is a greater number than the number
// of words in the node) AND the node has
// a following sibling node:
while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) {
// we update n to the next-sibling:
n = n.nextSibling;
// we get an array of words from
// newly-assigned node:
words = getActualWords(n);
// we update the wordCount,in
// order to progress through:
wordCount = words.length;
}
// if the number of words is less than
// the nth word after which we want to
// insert the element,we return from
// the function (doing nothing):
if (getActualWords(n).length < d.nth) {
return;
// otherwise:
} else {
// again we get an Array of actual words,// we slice that Array and then get the
// last array-element from that array,// using Array.prototype.pop():
var w = getActualWords(n).slice(0,d.nth).pop(),// here we get the index of that word
// (note that this is naive,and relies
// upon the word being unique as a
// proof-of-concept; I plan to update later):
i = n.textContent.indexOf(w);
// we split the n textNode into
// two separate textNodes,at
// supplied index ('i + w.length');
// n remains the shortened 'first'
// textNode:
n.splitText(i + w.length);
// navigating to the parentNode,and
// using insertBefore() to insert the
// new element ('elem') before the
// next-siblin of the n textNode:
n.parentNode.insertBefore(elem,n.nextSibling);
// doing exactly the same,but adding a
// newly-created textNode (of a space character)
// between the 'n' textNode (which by definition
// ends without a space) and newly-inserted
// element:
n.parentNode.insertBefore(document.createTextNode(' '),n.nextSibling);
// joining adjacent,but unconnected,// textNodes (n and the newly-inserted
// space character) together,to become
// a single node:
n.parentNode.normalize();
// returning the newly-created element
// so that it can be modified if required
// or simply cached:
return elem;
}
}
}
// calling the function,specifying the
// user-defined properties:
insertElemAfterNthWord({
// after the tenth word:
'nth': 10,// the element-type (a span):
'elemTag': 'span',// setting the text of that new element:
'elemText': 'this is the newly-added text inside the newly-added element!',// specifying the node into which the element
// should inserted:
'node': document.querySelector('div > div')
// chaining the function,to use the Element.classList
// API to add the 'newlyAdded' class to the
// newly-created element:
}).classList.add('newlyAdded');
function getActualWords(node) {
return node.textContent.split(/\s+/).filter(function(word) {
return word.trim().length;
});
}
function insertElemAfterNthWord(opts) {
var defaults = {
'nth': 5,'elemText': 'new element','elemTag': 'div'
};
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
defaults[prop] = opts[prop];
}
}
var d = defaults,tag = d.elemTag.replace(/<|>/g,elem = document.createElement(tag);
elem.textContent = d.elemText;
d.nth = parseInt(d.nth,10);
if (d.node) {
var n = d.node.firstChild,words = getActualWords(n),wordCount = words.length;
while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) {
n = n.nextSibling;
words = getActualWords(n);
wordCount = words.length;
}
if (getActualWords(n).length < d.nth) {
return;
} else {
var w = getActualWords(n).slice(0,i = n.textContent.indexOf(w);
n.splitText(i + w.length);
n.parentNode.insertBefore(elem,n.nextSibling);
n.parentNode.insertBefore(document.createTextNode(' '),n.nextSibling);
n.parentNode.normalize();
return elem;
}
}
}
insertElemAfterNthWord({
'nth': 10,'elemTag': 'span','elemText': 'this is the newly-added text inside the newly-added element!','node': document.querySelector('div > div')
}).classList.add('newlyAdded');
span {
color: #f90;
}
div {
margin-left: auto;
margin-right: auto;
}
.newlyAdded {
background-color: #ffa;
}
以上方法的注意事项：
>它要求所有单词都保存在单个文本节点中;它甚至不会尝试计算可能在一个元素中开始并在兄弟元素内部结束的单词.
>它不允许 – 在其当前实现中 – 任何将非文本插入到created元素中的方法(尽管可以通过使用elem.innerHTML代替elem.textContent来允许),但它确实返回create-element到调用上下文,因此它可以被缓存或链接,这允许以某种方式操纵created元素.
>有些检查,如果不是大多数,都非常幼稚;并将从扩展到受益于您自己的特定边缘案例.
参考文献：
> Array.prototype.filter().
> Array.prototype.pop().
> Array.prototype.slice().
> Document.createElement().
> Document.createTextNode().
> Document.querySelector().
> Element.classList
> for...in loop
> Guide to JavaScript Regular Expressions
> Node.firstChild
> Node.insertBefore()
> Node.nextSibling
> Node.nodeType
> Node.normalize()
> Object.hasOwnProperty()
> parseInt()
> String.prototype.indexOf()
> String.prototype.replace()
> String.prototype.split()
> String.prototype.trim().
> Text.splitText()
> while () {...} loop
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。