Javascript - заменить все строки с количеством символов меньше X - PullRequest
Новая
       3

Javascript - заменить все строки с количеством символов меньше X

0 голосов
/ 07 декабря 2011

Я пытаюсь создать букмарклет Javascript, который будет:

  • просматривать содержимое поля формы (класса "mceContentBody"),
  • найти все теги абзаца всодержимое которого внутри тега составляет менее 50 символов, и
  • добавляет внутри "сильные" теги.

Так что <p>This is less than 50 chars</p> станет <p><strong>This is less than 50 chars</strong></p>

но <p>This is a very long line that is more than 50 characters so it will remain untouched.</p>

Вот то, что у меня есть сейчас, но когда я запускаю его, оно делает все содержимое поля формы жирным.

Я уверен, что что-то испортил срегулярное выражение.Чего мне не хватает? 

javascript:var x = window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML;

x=x.replace(/(<p.*?>([A-Za-z ]{0,50})<\/p>)/g, "<p><strong>$1</strong></p>");

window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML=x;empty();

Спасибо!

Ответы [ 4 ]

2 голосов
/ 07 декабря 2011

Не разбирайте html с регулярным выражением, просто используйте полированный анализатор html: 

function replaceContents( contents ) {
var div = document.createElement("div"),
    paragraphs, i, l, paragraph, text,
    textProp = "textContent" in div ? "textContent" : "innerText";

div.innerHTML = contents;

paragraphs = div.getElementsByTagName("p");
l = paragraphs.length;

    for( i = 0; i < l; ++i ) {
    paragraph = paragraphs[i];
    text = paragraph[textProp];

        if( text.length > 0 && text.length < 50 ) {
        paragraph.innerHTML = "<strong>"+text+"</strong>";
        }
    }

return div.innerHTML;
}

Пример использования здесь: http://jsfiddle.net/wUfRQ/

1 голос
/ 07 декабря 2011

Измените свое регулярное выражение на это так, чтобы вы соответствовали всему, кроме конца открывающего тега P, оно должно быть примерно таким (или см. Этот тест регулярного выражения ): 

x=x.replace(/(<p[^>]*?>([A-Za-z ]{0,50})<\/p>)/g, "<p><strong>$1</strong></p>");

Проблема в том, что вы слишком много соответствует (см. этот тест регулярных выражений ) .. Вот хороший пример HTML, который, как я предполагаю, похож на тот, с которым у вас возникла проблема. 

<form><p>This is my form it has a lot of words in this paragraph because it is too cool for school. This is my form it has a lot of words in this paragraph because it is too cool for school. This is my form it has a lot of words in this paragraph because it is too cool for school. This is my form it has a lot of words in this paragraph because it is too cool for school.</p><p>Short</p></form>

Примечание: это будет иметь некоторые промахи. Если по какой-либо причине в открывающем теге P есть символ «>». Я предположил, что это не так, поскольку это довольно редко, если JavaScript не встроен.

0 голосов
/ 07 декабря 2011

Ваши внешние скобки охватывают все совпадения, поэтому $1 не хочет, чтобы вы хотели.Вместо этого используйте $2.

Или удалите внешние скобки.

0 голосов
/ 07 декабря 2011

Я бы изменил ваш код на это (причины указаны в блоке комментариев): 

var x = window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML;
/*
    Changed: <p.*?>
    To: <p[^>]*>
    Because: "." will include ">". By making a negated character class, we are ensuring that the regex will find the closing ">".

    Changed: [A-Za-z ]{0,50}
    To: [^<]{1,50}
    Because: Paragraph elements can contain other characters than letters and spaces (including your example paragraph to be captured.
             Properly formated HTML should never have a "<" character in the innerHTML of a paragraph element.
             Made the minimum "1" because there's no point to putting an empty strong element inside an empty paragraph element.

        Removed outer capturing block as it was not being used.

*/
x = x.replace(/<p[^>]*>([^<]{1,50})<\/p>/g, "<p><strong>$1</strong></p>");
window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML = x;
empty();

Единственная проблема, с которой JSLint сталкивается с этим, заключается в том, что использование класса отрицательных символов считается «небезопасным» из-за возможности захвата символов Юникода. Однако, поскольку вы не используете это для поля ввода, это не должно быть проблемой.

Надеюсь, это поможет.

...