Javascript 动态单词交换动画3

下面是2011年题为“动态单词交换动画”的前一个问题

多亏了马雷克的回答，我已经能够为页面上的文本创建一个动画，每隔几秒钟，就用列表中的另一个单词替换出一个单词。然而，前面的问题/示例是：“我有一个标题，上面写着“这很酷”，但我希望每隔几秒钟“酷”就被“整洁/棒极了/groovy/等等”取代

我需要我的标题说，例如，（为了连贯性）“这是个酷男人”。我的问题是，因为交替的单词较长，所以在每个单词之间旋转时，句子的长度会有所不同。有没有办法使用纯JS指定“男人”与“是”保持一定的距离“，因此，替换词填补了句子之间的空白，而整个句子的长度保持不变

如果可能的话，替代词能否集中在“人”和“是”之间

非常感谢您的帮助！菲尔

我目前拥有的纯JS（来自前面提到的帖子）如下：

var words=[“整洁”、“很棒”、“最好”、“非常棒”]；
var i=0；
var text=“这很酷”；
函数_getChangedText（）{
i=（i+1）%words.length；
console.log（字[i]）；
返回文本。替换（/cool/，words[i]）；
}
函数_changeText（）{
var txt=_getChangedText（）；
console.log（txt）；
$（“#转换器”）.text（txt）；
}
setInterval（“_changeText（）”，1000）；
这很酷

每次只需使用字符串的第8个索引，并在新词后附加man

---

这就是你的意思吗？

这是更多的html/css内容。。。但是，经过几次MOD后：

var words=[“整洁”、“很棒”、“最好”、“groovy”]；
var i=0；
var text=“这是个酷男人”；
函数_getChangedText（）{
i=（i+1）%words.length；
console.log（字[i]）；
返回文本。替换（/cool/，words[i]）；
}
函数_changeText（）{
var txt=_getChangedText（）；
console.log（txt）；
$（“#转换器”）.html（txt）；
}
setInterval（“_changeText（）”，1000）；

---

还有一点样式（检查CSS，根据您的需要进行更改）…如果我正确理解您的问题，我认为这接近您想要的…）

请注意-这不是“纯粹的”，vanilla JS-jQuery也在这里。。。

<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
    i = (i + 1) % words.length;
    console.log(words[i]);
    return text.replace(/cool/, words[i]);
}
function _changeText() {
    var txt = _getChangedText();
    console.log(txt);
    $("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>

var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "<span id='first'>This is</span> <span id='inner'>cool</span> <span id='sec'>man</span>";
function _getChangedText() {
    i = (i + 1) % words.length;
    console.log(words[i]);
    return text.replace(/cool/, words[i]);
}
function _changeText() {
    var txt = _getChangedText();
    console.log(txt);
    $("#changer").html(txt);
}
setInterval("_changeText()", 1000);