javascript - 速度阅读器 javascript 使合并的单词

问题描述

我有我的速读脚本。我有一个问题。现在我在快速阅读器上只能看到一个单词，我需要在一行中一次看到 2、3、5 个单词。我怎么能做到？

我的代码：

// Inspired by http://jsfiddle.net/vKZLn/1/
var Spritzer = function (el) {

    el.classList.add('spritzed')
    el.style.padding = (parseInt(window.getComputedStyle(el)['font-size']) / 1.3) + 'px'

	el.appendChild(document.createElement("div"))
    el.innerHTML = el.innerHTML.replace('/<span></span>/g', '');

    this.playing = true

    this.currentTimer = null

    function processWord(word) {
        var center = Math.floor(word.length / 2),
            letters = word.split('')
        return letters.map(function(letter, idx) {
            if (idx === center)
                return '<span class="highlight">' + letter + '</span>'
            return letter;
        }).join('')
    }

    function positionWord() {
        var wordEl = el.firstElementChild,
            highlight = wordEl.firstElementChild
        
        var centerOffsetX = (highlight.offsetWidth / 2) + highlight.offsetLeft,
            centerOffsetY = (highlight.offsetHeight / 2) + highlight.offsetTop
        
        wordEl.style.left = ((el.clientWidth / 2) - centerOffsetX) + 'px'
        wordEl.style.top = ((el.clientHeight / 2) - centerOffsetY) + 'px'
    }

    var currentWord = 0,
        delay
    
    var displayNextWord = function() {
        var word = this.words[currentWord++]
        if (typeof word == 'undefined') return
        // WTB> nlp.js...
        var hasPause = /^\(|[,\.\)]$/.test(word)
        
        // XSS?! :(
       	window.el = el
        el.firstElementChild.innerHTML = word
        positionWord()

        if (currentWord !== this.words.length)
            this.currentTimer = setTimeout(displayNextWord, delay * (hasPause ? 2 : 1))
    }.bind(this)

    this.render = function(text, wpm) {
        this.words = text.replace(/^\s+|\s+|\n$/,'').split(/\s+/).map(processWord)
        delay = 60000 / wpm

        this.playing = true
        clearTimeout(this.currentTimer)
        displayNextWord()
    }

    this.play = function() {
        this.playing = true
        displayNextWord()
    }

    this.pause = function() {
        this.playing = false
        clearTimeout(this.currentTimer)
    }

    this.toggle = function() {
        if (this.playing)
            this.pause()
        else
            this.play()
    }
}


setTimeout(function() {
  var wordsPerMinute = 155;
	var text = document.getElementsByTagName('text')[0].innerHTML;	

  console.log(text);
  
	var h1 = document.body.appendChild(document.createElement('h1'));
	var output = new Spritzer(h1);
	output.render(text, wordsPerMinute);
}, 2000)

body {
  background: #000;
  display: flex;
  color: #fff;
  height: 100vh;
  
  font-family: "PT Sans Caption";
  
  align-items: center;
  justify-content: center;
}

.spritzed {
    padding: 30px;
    position: relative;
  display: flex;
  align-items: center;
}

.spritzed::before, .spritzed::after {
    content: "";
    display: block;
    position: absolute;
  display: none;
    left: 50%;

    margin-left: -1px;
    height: 10px;
    background-color: #fff;
    width: 2px;
    top: 0;
}

.spritzed::after {
    top: auto;
    bottom: 0;
}

.spritzed > div {
    position: absolute;
}

.highlight {
    color: #74de35;
}

text{
	display: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&display=swap&subset=cyrillic" rel="stylesheet">
</head>
<body>
  <text>
    Hello world! I need this string show merged.
  </text>
  </body>
</html>

现在：它看起来像这样：

Hello 
world! 
I 
need 
this 
string 
show 
merged.

但我需要他的模板：

Hello 
world! 
I 
need 
this string show merged.

我该怎么做？也许我需要分隔词的分隔符，例如：

Hello world! I need / this string show merged.

如果我有，/则下一个字符串将与其他单词合并，但如果没有，则单词将一一显示。

我尝试使用 make delimitr<span>/</span>并将其从字符串中删除，但不起作用。

标签： javascript

javascript - 速度阅读器 javascript 使合并的单词

问题描述

解决方案

推荐阅读