如果我有一串HTML，可能就是这样......
<h2>Header</h2><p>all the <span class="bright">content</span> here</p>
我想操纵字符串，以便所有单词都反转...例如......
<h2>redaeH</h2><p>lla eht <span class="bright">tnetnoc</span> ereh</p>
我知道如何从HTML中提取字符串并通过传递给函数并获得修改后的结果来操作它，但是如何在保留HTML的同时这样做呢？
我更喜欢非语言特定的解决方案，但如果它必须是特定于语言的，那么知道php / javascript会很有用。
我还希望能够操作跨越多个DOM元素的文本......
Quick<em>Draw</em>McGraw
warGcM<em>warD</em>kciuQ
目前，我想以某种方式用一个唯一的令牌替换所有HTML节点，同时将原件存储在一个数组中，然后进行忽略令牌的操作，然后用数组中的值替换令牌。
这种方法看起来过于复杂，我不知道如何在不使用REGEX的情况下替换所有HTML，我知道你可以去堆栈溢出监狱岛。
我想澄清一个问题。我希望文本操作发生在x个DOM元素的数量上 - 例如，如果我的公式在一个单词的中间随机移动字母，让开始和结束相同，我希望能够做到此...
<em>going</em><i>home</i>
转换为
<em>goonh</em><i>gmie</i>
因此HTML元素保持不变，但是内部的字符串内容被操纵（作为一个整体 - 所以goinghome以这个例子中的操作公式传递）以操纵公式选择的任何方式。
答案 0 :(得分：1)
如果你想在不改变文字的情况下获得类似的视觉效果，你可以用css作弊，用
h2, p {
direction: rtl;
unicode-bidi: bidi-override;
}
这将颠倒文本
答案 1 :(得分：1)
您好我很久以前就遇到过这种情况，我使用了以下代码。这是一个粗略的代码
<?php
function keepcase($word, $replace) {
$replace[0] = (ctype_upper($word[0]) ? strtoupper($replace[0]) : $replace[0]);
return $replace;
}
// regex - match the contents grouping into HTMLTAG and non-HTMLTAG chunks
$re = '%(</?\w++[^<>]*+>) # grab HTML open or close TAG into group 1
| # or...
([^<]*+(?:(?!</?\w++[^<>]*+>)<[^<]*+)*+) # grab non-HTMLTAG text into group 2
%x';
$contents = '<h2>Header</h2><p>the <span class="bright">content</span> here</p>';
// walk through the content, chunk, by chunk, replacing words in non-NTMLTAG chunks only
$contents = preg_replace_callback($re, 'callback_func', $contents);
function callback_func($matches) { // here's the callback function
if ($matches[1]) { // Case 1: this is a HTMLTAG
return $matches[1]; // return HTMLTAG unmodified
}
elseif (isset($matches[2])) { // Case 2: a non-HTMLTAG chunk.
// declare these here
// or use as global vars?
return preg_replace('/\b' . $matches[2] . '\b/ei', "keepcase('\\0', '".strrev($matches[2])."')",
$matches[2]);
}
exit("Error!"); // never get here
}
echo ($contents);
?>
答案 2 :(得分：0)
使用能为您提供DOM API的内容解析HTML。
编写一个循环遍历元素子节点的函数。
如果节点是文本节点，请将数据作为字符串获取，将其拆分为单词，将每个单词反转，然后将其分配回来。
如果某个节点是一个元素，请递归到您的函数中。
答案 3 :(得分：0)
可以使用jquery吗？
$('div *').each(function(){
text = $(this).text();
text = text.split('');
text = text.reverse();
text = text.join('');
$(this).text(text);
});
请参阅此处 - http://jsfiddle.net/GCAvb/
答案 4 :(得分：0)
我实现了一个似乎运行良好的版本 - 虽然我仍然使用（相当普遍和粗制滥造）正则表达式从文本中提取html标签。现在它在评论javascript：
/**
* Manipulate text inside HTML according to passed function
* @param html the html string to manipulate
* @param manipulator the funciton to manipulate with (will be passed single word)
* @returns manipulated string including unmodified HTML
*
* Currently limited in that manipulator operates on words determined by regex
* word boundaries, and must return same length manipulated word
*
*/
var manipulate = function(html, manipulator) {
var block, tag, words, i,
final = '', // used to prepare return value
tags = [], // used to store tags as they are stripped from the html string
x = 0; // used to track the number of characters the html string is reduced by during stripping
// remove tags from html string, and use callback to store them with their index
// then split by word boundaries to get plain words from original html
words = html.replace(/<.+?>/g, function(match, index) {
tags.unshift({
match: match,
index: index - x
});
x += match.length;
return '';
}).split(/\b/);
// loop through each word and build the final string
// appending the word, or manipulated word if not a boundary
for (i = 0; i < words.length; i++) {
final += i % 2 ? words[i] : manipulator(words[i]);
}
// loop through each stored tag, and insert into final string
for (i = 0; i < tags.length; i++) {
final = final.slice(0, tags[i].index) + tags[i].match + final.slice(tags[i].index);
}
// ready to go!
return final;
};
上面定义的函数接受一个HTML字符串，以及一个操作函数来处理字符串中的单词，无论它们是否被HTML元素拆分。
首先删除所有HTML标记，然后存储标记及其取自的索引，然后操作文本，然后以相反的顺序将标记添加到原始位置。
/**
* Test our function with various input
*/
var reverse, rutherford, shuffle, text, titleCase;
// set our test html string
text = "<h2>Header</h2><p>all the <span class=\"bright\">content</span> here</p>\nQuick<em>Draw</em>McGraw\n<em>going</em><i>home</i>";
// function used to reverse words
reverse = function(s) {
return s.split('').reverse().join('');
};
// function used by rutherford to return a shuffled array
shuffle = function(a) {
return a.sort(function() {
return Math.round(Math.random()) - 0.5;
});
};
// function used to shuffle the middle of words, leaving each end undisturbed
rutherford = function(inc) {
var m = inc.match(/^(.?)(.*?)(.)$/);
return m[1] + shuffle(m[2].split('')).join('') + m[3];
};
// function to make word Title Cased
titleCase = function(s) {
return s.replace(/./, function(w) {
return w.toUpperCase();
});
};
console.log(manipulate(text, reverse));
console.log(manipulate(text, rutherford));
console.log(manipulate(text, titleCase));
还有一些怪癖，比如标题和段落文本没有被识别为单独的单词（因为它们在单独的块级标签而不是内联标签中）但这基本上是我尝试的方法的证明做。
我还希望它能够处理实际添加和删除文本的字符串操作公式，而不是替换/移动它（操作后的变量字符串长度）但是这开启了一个全新的工作罐我不是尚未准备好。
现在我已经在代码中添加了一些注释，并将其作为javascript中的一个要点，我希望有人会改进它 - 特别是如果有人可以删除正则表达式部分并用更好的东西替换它！
（输出到控制台）
（http://ejohn.org/files/htmlparser.js）
答案 5 :(得分：0)
您可以使用 setInterval 每隔 ** 次更改它，例如：
const TITTLE = document.getElementById("Tittle") //Let's get the div
setInterval(()=> {
let TITTLE2 = document.getElementById("rotate") //we get the element at the moment of execution
let spanTittle = document.createElement("span"); // we create the new element "span"
spanTittle.setAttribute("id","rotate"); // attribute to new element
(TITTLE2.textContent == "TEXT1") // We compare wich string is in the div
? spanTittle.appendChild(document.createTextNode(`TEXT2`))
: spanTittle.appendChild(document.createTextNode(`TEXT1`))
TITTLE.replaceChild(spanTittle,TITTLE2) //finally, replace the old span for a new
},2000)<html>
<head></head>
<body>
<div id="Tittle">TEST YOUR <span id="rotate">TEXT1</span></div>
</body>
</html>