Question

我的代码应该在x个单词之后放置横幅。代码正在运行，但不是应该如此，因为它使用slice进行计数或切片。我需要使用(count >= 20)而不是slice(0, 20)

这样，文本中的单词将被计算，而不是计算行数。这是执行我需要的代码：http://docs.docker.com/engine/userguide/dockerimages/ 但是，此代码中有一个循环，它复制图像（如小提琴中所示），我无法使return false正常工作。

所以我得到了一些帮助，这是最终结果https://jsfiddle.net/714Lmgfu/3/，这段代码按照它应该的方式工作，除了如前所述，它不会计算单词。我应该改变什么才能让它算起来呢？

例如，更改：

  var img = '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'

    $(".newsitem_text").html(function (i, h) {
        return h.replace(h.split(/\s+/).slice(0, 20).join(' '), function (m) {
            return m + img; });
            });

有：

function check() {
    if (count >= 20) {
newHtml += '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'     
    count = 0;
    }
  }

Answer 1

var img = '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'

$(".newsitem_text").html(function (i, h) {
    // Match a word followed by one or more spaces 20 times
    //   Insert <img>-tag
    //   Repeat
    return h.replace(/([^\s]+\s+){20}/g, function (m) {
        return m + img;
    });
});

故障：

/ # Start regex
  ( # Start capturing group
    [^\s]+ # Match everything - but space - 1 or more times
           #   could also be written as .+? that means:
           #      match everything 1 or more times, but not gready (meaning that if a space is encountered it will stop matching)
    \s+ # Match space 1 or more times
  ) # End group
  {20} # repeat 20 times
/ # End regex
g # global flag - will run the regex multiply times until no more matches are posible

Answer 2

尝试将String.prototype.match()与RegExp /\w+./g匹配，以匹配字母数字字符，后跟任意单个字符，Array.prototype.splice()

var img = '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'

var text = document.querySelector(".newsitem_text");

var html = text.innerHTML,
    matches = html.match(/\w+./g);
    matches.splice(20, 0, img);
     
text.innerHTML = matches.join(" ");

<div style="width:450px; margin-left:auto; margin-right:auto" class="newsitem_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque urna eu pulvinar maximus. Sed elit nunc, vestibulum ut eros vitae, pellentesque rhoncus ipsum. In et metus non diam porttitor maximus iaculis nec lectus. Quisque sodales scelerisque
  auctor. Nam rutrum venenatis eros, eu condimentum erat placerat ut. Pellentesque sed tempus sem, eu viverra ipsum. Vestibulum nec turpis convallis, dapibus massa vitae, posuere mauris. Suspendisse mattis tincidunt lorem. Aliquam erat volutpat. Nullam
  at tincidunt erat, maximus laoreet ipsum. Quisque nunc neque, semper tincidunt placerat eget, blandit a ante. Suspendisse pulvinar, velit eu ultrices pulvinar, lacus sapien tincidunt ipsum, eget sollicitudin mauris eros molestie ex. Etiam quis orci
  dui. Phasellus vestibulum mollis molestie. Nam condimentum ornare nisl, sed finibus risus tempus vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum eget ullamcorper
  lorem. Aliquam mollis elit in sem dapibus dapibus. Proin vel massa a arcu dictum tincidunt in ut ante. Sed feugiat tempus dictum. Praesent in leo ullamcorper, sodales turpis et, vehicula tellus. Duis pellentesque dui ac turpis tristique imperdiet. Sed
  sed orci lectus. Suspendisse non egestas sem, sed tincidunt sem. Etiam laoreet dui sem. Mauris hendrerit massa tempus, euismod arcu sit amet, eleifend quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus
  id fringilla mauris. Cras dapibus non lacus at finibus. Nullam vitae sagittis neque. Mauris libero velit, interdum non vehicula non, lacinia non augue. Maecenas elementum lacinia interdum. Morbi eget mollis nisl. Integer accumsan condimentum tellus,
  lacinia pellentesque urna volutpat a. Nullam semper sem et erat commodo sollicitudin. Proin rhoncus felis eu aliquam venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla pretium velit eu molestie
  condimentum. Vestibulum vitae velit mi. Integer nec leo quam. Nam pulvinar ligula congue consectetur tristique. Donec placerat faucibus diam sit amet fermentum. Ut id pellentesque risus. Nunc lacus orci, rhoncus ut risus sed, mattis posuere tellus.
  Nulla pellentesque eros sed neque consectetur dictum.</div>

jsfiddle https://jsfiddle.net/scadp0ar/3/

Answer 3

你应该尝试这样的事情：

 var img = '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />';

 jQuery( document ).ready(function( $ ) {
     $(".newsitem_text").html(getTextWithImageBetweenWords($(".newsitem_text").html(),20));
 });

 function getTextWithImageBetweenWords(text, count){
   var split_text = text.split(' ');
   var _out = []; 
   var words = split_text.length;
   for(var i=0;i < words; i++){
       if(i !== 0 && i === count){          
        _out[i] = split_text[i] + img;
       }
       else{
           _out[i] = split_text[i];
       }      
   }

   return _out.join(' ');
 }

这是一种更易读，更简单的方法，here is the JSFiddle!

注意：如果您想每n（在您的情况下为20个）字词中重复图片，只需更改i === count的{{1}}。

Answer 4

根据您的评论，您可能想要编辑问题（只是为了清楚而不是试图成为一个混蛋）。此外，通过在空间分裂，计数是单词。＆＃39; \ S＆＃39;是空间＆＃39; \ n＆＃39;是新线＆＃39; \ t＆＃39;是回车，＆＃39; \ r \ n＆＃39;是一种特殊类型的回车。您可能会制作一个更复杂的正则表达式，以涵盖不是新行或空格的所有内容＆＃39; \ t | \ s | \ r \ n＆＃39;。要将图像放置在线条中，您可以使用样式技巧，如后面所述。

如果您想让图片不重复更改：

function check() {
    if (count >= 20) {
newHtml += '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'     
    count = 0;
    }
  }

为了更合适，请尝试对齐=＆＃34;对＆＃34;这会将文字包裹在图像周围。

//jQuery(function ($) {

jQuery( document ).ready(function( $ ) {


    var img = '<img align="right" src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'

    $(".newsitem_text").html(function (i, h) {
        return h.replace(h.split(/\s+/).slice(20,21).join(' '), function (m) {
            return m + img; });
            });
});

到

function check() {
    if (count == 20) {
newHtml += '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />';
    }
  }

为避免使用讨厌的循环，您可以在不同的位置切片或使用拼接：

//jQuery(function ($) {

jQuery( document ).ready(function( $ ) {


    var img = '<img src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />'

    $(".newsitem_text").html(function (i, h) {
        return h.replace(h.split(/\s+/).slice(20, 21).join(' '), function (m) {
            return m + img; });
            });
});

要将图像包装在单词中，请使用align =＆＃34; left＆＃34;或者对齐=＆＃34;对＆＃34;在图片标签中。

<img align="right" src="http://blog.leadlovers.com.br/wp-content/uploads/sites/23/2014/03/marca21-160x160.png" />

Jquery使用＆＃34; count＆＃34;而不是＆＃34;切片＆＃34;

4 个答案: