Add 'whatever' to string in Javascript

Question

I have a function in Javascript which replace a textarea with CKEDITOR.

document.getElementById("text").action=CKEDITOR.replace(
         'body_content',
         {toolbar : 'big',
          height : '450',
          enterMode : CKEDITOR.ENTER_BR}
);

Now I'd like to replace 3 textareas with CKEDITOR on the same function. The 3 areas have name body_contentSOMETHING.

How can I write an expression to replace SOMETHING with whatever?

EDIT: whatever is not defined. should be something like *.exe on windows file reseach

Jonathan Lonowski · Accepted Answer · 2013-10-08T17:45:43.203

2

Assuming body_content{{something}} is an id, you can use an attribute selector to select them and loop:

var content_areas = document.querySelectorAll('textarea[id^="body_content"]');

for (var i = 0, l = content_areas.length; i < l; i++) {
    content_areas[i].action = CKEDITOR.replace(
         content_areas[i],
         {toolbar : 'big',
          height : '450',
          enterMode : CKEDITOR.ENTER_BR}
    );
}

For compatibility with IE 8, you can use textarea[id|="body_content"] (|= vs ^=), but this expects the value to be whole or followed by a -:

<textarea id="body_content-something"></textarea>

Or add a class to the elements to query by:

<textarea id="body_contentsomething" class="body_content"></textarea>

var content_areas = document.querySelectorAll('.body_content');

// ...

Also, without knowing what document.getElementById("text") is supposed to refer to, I'm not sure how to keep that in the snippets.

edited Oct 08 '13 at 17:45

answered Oct 08 '13 at 17:32

Jonathan Lonowski

121,453
34
200
199

This is a better solution than mine, *if* you're okay with using `querySelectorAll`. Since the OP's example and comments point to not being able to expect a hyphen being used, I used a manual DOM traversal approach. In the end, both do the same, this one is just more modern and a little shorter. – Ingo Bürk Oct 08 '13 at 17:33
Thank you! This solution is perfect, the only problem is that I use `document.getElementById("text").action` because those `areas` are included on a `AJAX` reply. If I only post the standard CKEDITOR solution the JS is not executed. – Perocat Oct 08 '13 at 17:40
You can access `content_areas[i].action` for the assignment just like I did in my answer. – Ingo Bürk Oct 08 '13 at 17:41
@Perocat Well, what is `document.getElementById('text')`, exactly? I can only guess how to help with that without knowing more. Such as: Is it a `
`? If so, its `.action` can only hold the value from 1 `CKEDITOR.replace()`. So, does each `` have its own `<form>`? How are the `</form><form>`s identified?</form>
– Jonathan Lonowski Oct 08 '13 at 17:55
@IngoBürk Perfect, I used `content_areas[i].action` and works like a charm! It's a `
`: it was neccesary to run the `JS code`. Now I found a solution!
– Perocat Oct 08 '13 at 18:11

score 1 · Answer 2 · edited May 23 '17 at 11:50

Based on an answer from this SO thread you can traverse the DOM like this (jsfiddle):

function getElementsByIdStartsWith(selectorTag, prefix) {
    var items = [];
    var elements = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].id.lastIndexOf(prefix, 0) === 0) {
            items.push(elements[i]);
        }
    }

    return items;
}

var affectedElements = getElementsByIdStartsWith("textarea", "body_content");
for(var i = 0; i < affectedElements.length; i++) {
    affectedElements[i].action = CKEDITOR.replace( /* ... */ );
}

However, this is not very efficient and sounds like an XY problem to me. It would be better to avoid this in the first place, for example by tagging the textareas you want to replace with a common class. Then you could simply do

var affectedElements = document.getElementsByClassName("common-class");

score 0 · Answer 3 · answered Oct 08 '13 at 17:10

0

var updatedString = originalString.replace(/SOMETHING$/g,"whatever");

answered Oct 08 '13 at 17:10

Web User

7,438
14
64
92

whatever is not defined. should be something like *.exe on windows file reseach – Perocat Oct 08 '13 at 17:13
How do you want to append something if you don't know what you want to append? – Ingo Bürk Oct 08 '13 at 17:14
I want not to append anything. E.g. I have 3 textareas `body_content_1234`, `body_content_test`, `body_content_3if`. Now every `textarea` which starts with `body_content` should be replaced with CKEDITOR, doesn't matter what comes after – Perocat Oct 08 '13 at 17:17
http://stackoverflow.com/questions/6991494/javascript-getelementbyid-base-on-partial-string should help you then – Ingo Bürk Oct 08 '13 at 17:22

Add 'whatever' to string in Javascript

3 Answers3